<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0</title>


</head>
<body>

<jsp:include page="../include/header.jsp"/>
<script src="<c:url value='/resource/js/lib/template.js'/>"></script>
<script src="<c:url value='/resource/js/lib/jqPaginator.js?v2.1'/>"></script>


<div class="matters-container">
    <div class="mc-hd">
        <p class="consult-t">queryCenter</p>
        <h1 class="consult-h1">专注高端”互联网+政务”设计</h1>
        <div class="type-wrap">
            <h2 class="typedH2">慧眼看世界，在政务服务的路上不断追求创新！</h2>
        </div>
    </div>
    <div class="mc-bd">
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2">
                    <form class="form-horizontal" role="form" id="consult_form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="text-red">*</span>咨询部门：</label>
                            <input type="hidden" value="410000000000" id="root_id"/>
                            <div class="col-sm-10">
                                <div style="display:inline-block;position: relative">
                                    <select id="dept1" data-toggle="select" style="width:150px"
                                            onchange="loadSubDept('dept2','template_dept2','dept1')">
                                        <script id="template_dept1" type="text/html">
                                            <option value="">--请选择--</option>
                                            {{each data as d i}}
                                            <option value="{{d.deptId}}" data-pinyin="{{d.deptfullnamepy}}">{{d.deptName}}</option>
                                            {{/each}}
                                        </script>
                                    </select>
                                </div>
                                <div style="display:none;position: relative">
                                    <select id="dept2" data-toggle="select" style="width:150px"
                                            onchange="loadSubDept('dept3','template_dept3','dept2')">
                                        <script id="template_dept2" type="text/html">
                                            <option value="">--请选择--</option>
                                            {{each data as d i}}
                                            <option value="{{d.deptId}}" data-pinyin="{{d.deptfullnamepy}}">{{d.deptName}}</option>
                                            {{/each}}
                                        </script>
                                    </select>
                                </div>
                                <div style="display:none;position: relative">
                                    <select id="dept3" data-toggle="select" style="width:150px">
                                        <script id="template_dept3" type="text/html">
                                            <option value="">--请选择--</option>
                                            {{each data as d i}}
                                            <option value="{{d.deptId}}" data-pinyin="{{d.deptfullnamepy}}">{{d.deptName}}</option>
                                            {{/each}}
                                        </script>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="text-red">*</span>咨询问题：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" maxlength="50" id="subject" name="subject"
                                       placeholder="请输入要咨询的问题" onkeyup="change()">
                                <p class="text-red" id="numTitle">(您还可以输入50个字符)</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="text-red">*</span>咨询内容：</label>
                            <div class="col-sm-9">
                            <textarea class="form-control" rows="3" maxlength="800" id="content" name="content"
                                      placeholder="请输入要咨询的问题详细情况" onkeyup="change()"></textarea>
                                <p class="text-red" id="numContent">(您还可以输入800个字符)</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">是否匿名：</label>
                            <div class="col-sm-9">
                                <label for="anonymous1" style="cursor:pointer"><input name="anonymous" type="radio"
                                                                                      id="anonymous1"
                                                                                      value="Y"/>是</label>
                                <label for="anonymous2" style="cursor:pointer"><input name="anonymous" type="radio"
                                                                                      id="anonymous2"
                                                                                      value="N"/>否</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">手机号码：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" maxlength="12"
                                       value="${current_member==null?'':current_member.acountId}" id="telephone"
                                       name="telephone">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><span class="text-red">*</span>验证码：</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="consultvaldate" name="consultvaldate">
                            </div>
                            <div class="col-sm-2" id="validate_code">
                                <a href="javascript:refeshCode()">
                                    <img src="<c:url value='/simpleImg'/>" width="128" height="34">
                                </a>
                            </div>
                        </div>
                    </form>
                    <hr>
                    <div class="btn-box">
                        <input type="button" class="btn btn-yellow btn-lg" value="提交" onclick="consultinsert();"/>
                        <%--<input type="reset" class="btn btn-default btn-lg" value="重置"/>--%>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<jsp:include page="../include/footer.jsp"/>


<script type="text/javascript">

    $(document).ready(function () {
        loadSubDept("dept1", "template_dept1", "root_id");
    });

    function loadSubDept(containerId, templateId, parentDeptCtlId) {
        $.ajax({
            type: 'get',
            url: "<c:url value='/depts/sub'/>",
            data: {
                parent_id: $('#' + parentDeptCtlId).val()
            },
            success: function (resp) {
                resp = eval(resp);
                console.log(resp, resp.data.length);
                if (resp.data.length > 0) {
                    var shtml = template(templateId, resp);
                    $("#" + containerId).html(shtml);
                    $("#" + containerId).select("create2");
                    $("#" + containerId).parent().css("display", "inline-block");
                }
                else {
                    $("#" + containerId).parent().css("display", "none");
                }
            },
        });
    }

    function change() {
        var subject = $("#subject").val().trim();
        var length = 50 - subject.length;
        if (length >= 0) {
            $("#numTitle").html("(您还可以输入" + length + "个字符)");
        }
        else {
            $("#numTitle").html("(您输入的咨询主题已超过50个字符)");
        }
        var content = $("#content").val().trim();
        var lenCont = 800 - content.length;
        if (lenCont >= 0) {
            $("#numContent").html("(您还可以输入" + lenCont + "个字符)");
        }
        else {
            $("#numContent").html("(您输入的咨询主题已超过800个字符)");
        }
    }

    function consultinsert() {
        var subject = $("#subject").val().trim();
        var content = $("#content").val();
        var anonymous = $('input:radio[name="anonymous"]:checked').val();
        var telephone = $("#telephone").val();
        var consultvaldate = $("#consultvaldate").val().trim();
        var deptId = $('#dept1').val();
        var deptName = $('#dept1').find("option:selected").text().replace(' ', '');


        if ($('#dept2').val() != '' && $('#dept2').val() != null) {
            deptId = $('#dept2').val();
            deptName += $('#dept2').find("option:selected").text();
        }

        if ($('#dept3').val() != '' && $('#dept3').val() != null) {
            deptId = $('#dept3').val();
            deptName += $('#dept3').find("option:selected").text();
        }


        if (deptId == '') {
            toast("请选择部门");
            return;
        }
        if (subject == '') {
            toast("咨询问题不能为空");
            return;
        }
        if (content == '') {
            toast("咨询内容不能为空");
            return;
        }
        if (anonymous == null) {
            toast("是否匿名");
            return;
        }
        if (consultvaldate == null || consultvaldate == '') {//验证码必须正确输入切不能不能为空
            toast("请输入验证码");
            return;
        }
        $.ajax({
            type: 'POST',
            url: "<c:url value='/taskbases/validatorCode'/>",
            data: {
                my_code: consultvaldate
            },
            success: function (res) {
                if (res.succ) {
                    $.ajax({
                        url: "<c:url value='/handyconsult'/>",
                        type: "POST",
                        data: JSON.stringify({
                            subject: subject,
                            content: content,
                            anonymous: anonymous,
                            telephone: telephone,
                            deptName: deptName,
                            deptId: deptId,
                            consultant: consultant,
                            consultantName: consultantName
                        }),
                        dataType: "json",
                        contentType: 'application/json;charset=utf-8',
                        success: function (res) {
                            if (res.succ) {
                                $('.askQuestions').modal("hide");
                                $('#consult_form')[0].reset();
                                refeshCode();
                                toast("咨询成功,请耐心等待回复");
                                setTimeout(query, 1000);
                            } else {
                                toast(res.msg);
                            }
                        },
                        error: function (res) {
                            toast(res.msg);
                        }
                    });
                } else {
                    toast(res.msg);
                }
            }
        });
    }

    function query() {
        self.location.href = '<c:url value="/handyconsult/consult"></c:url>';
    }

    function refeshCode() {
        var a = $("#validate_code");
        var src = '<c:url value="/simpleImg?rand="/>' + Math.random();
        a.html("<a href='javascript:refeshCode()'><img src='" + src + "' width='128' height='34'></a>");
    }

    var consultant = '${current_member.guid}';
    var consultantName = '${current_member.realName}';
    function showConsult() {

        if (consultant == '') {
            $(".login-a").trigger('click');
            return;
        }
        if (consultantName == '') {
            consultantName = consultant;
        }
        $('.askQuestions').modal();
        changeDept('root_id', 'dept1');
    }

    function changeDept(id1, id2) {
        $.ajax({
            url: "<c:url value='/depts/sub'/> ",
            type: "GET",
            data: {
                parent_id: $('#' + id1).val()
            },
            dataType: "json",
            success: function (res) {
                if (res.succ) {
                    if (res.data) {
                        console.log(id2);
                        $('#dept3').html("");
                        $('#dept3').append("<option value=''>请选择</option>");
                        $('#' + id2).html("");
                        $('#' + id2).append("<option value=''>请选择</option>");
                        $.each(res.data, function (index, obj) {
                            $('#' + id2).append("<option value='" + obj.guid + "'>" + obj.deptName + "</option>");
                        });
                    }
                } else {
                    toast(res.msg);
                }
            },
            error: function (res) {
                toast(res.msg);
            }
        });
    }


</script>

<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main.js'/>"
        id="current-page" current-page="consultCenter"></script>
</body>
</html>
